<template>
	<view>
		<view class="order_type_tab_box">
			<view
				:class="['order_type_tab_head', item.status === activeTab ? 'order_type_tab_head_active' : '']"
				@click="handelChangeOrderType(item)"
				v-for="item in orderTab"
				:key="item.status">
				<view class="type_text">{{ item.name }}</view>
				<view class="active_type"></view>
			</view>
		</view>
		<view>
			<studioPage ref="studioPageRef" v-show="activeTab == 1"></studioPage>
			<teamMembersPage ref="teamMembersPageRef" v-show="activeTab == 2"></teamMembersPage>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onPullDownRefresh, onReachBottom, onShow, onLoad, onNavigationBarButtonTap } from "@dcloudio/uni-app";

import studioPage from "./components/studioPage.vue";
import teamMembersPage from "./components/teamMembersPage.vue";
import { useUserStoreToRefs } from "@/store/useUserStore";
import { useStudioStoreToRefs } from "@/store/useStudioStore";

let { userInfo } = useUserStoreToRefs();
let { identity, studio, studioBalance } = useStudioStoreToRefs();

let studioPageRef = ref(null);
let teamMembersPageRef = ref(null);

const orderTab = reactive([
	{ name: "工作室", status: 1 },
	{ name: "团队成员", status: 2 }
]);
let activeTab = ref(1);

const handelChangeOrderType = async (item) => {
	activeTab.value = item.status;
	if (activeTab.value == 1) {
		studioPageRef.value && studioPageRef.value.getData();
	}
	if (activeTab.value == 2) {
		console.log(teamMembersPageRef);
		teamMembersPageRef.value && teamMembersPageRef.value.getData();
	}
};
onShow(() => {
	if (activeTab.value == 1) {
		console.log("studioPageRef");
		studioPageRef.value && studioPageRef.value.getData();
	}
	if (activeTab.value == 2) {
		console.log("teamMembersPageRef");
		teamMembersPageRef.value && teamMembersPageRef.value.onDataInit();
	}
});
// 页面下拉刷新
onPullDownRefresh(async () => {
	if (activeTab.value == 1) {
		studioPageRef.value && studioPageRef.value.onRefresh();
	}
	if (activeTab.value == 2) {
		teamMembersPageRef.value && teamMembersPageRef.value.onRefresh();
	}
});
// 触底
onReachBottom(() => {
	if (activeTab.value == 2) {
		teamMembersPageRef.value && teamMembersPageRef.value.onLoadMore();
	}
});
//监听导航右上按钮事件
onNavigationBarButtonTap(() => {
	uni.navigateTo({
		url: `/pages/income/personalIncomeStatement/index?userId=${userInfo.value.id}&studioId=${studio.value.id}`
	});
});
</script>

<style scoped lang="scss">
.order_type_tab_box {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	background: #ffffff;
	box-sizing: border-box;
	border-top: 1rpx solid #e4e6e6;

	.order_type_tab_head {
		position: relative;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		height: 88rpx;
		padding-top: 20rpx;
		box-sizing: border-box;

		.type_text {
			font-weight: 400;
			font-size: 28rpx;
			height: 100%;
			color: #5c5e5e;
			text-align: center;
		}
	}

	.order_type_tab_head_active {
		.type_text {
			font-weight: bold;
			font-size: 32rpx;
			color: #1b2120;
		}

		.active_type {
			bottom: 0;
			width: 32rpx;
			height: 8rpx;
			background: var(--color-primary);
			border-radius: 4rpx;
		}
	}
}
</style>
